﻿@page "/DatePicker/Disabled-Dates"

@using Syncfusion.Blazor.Calendars

@inherits SampleBaseComponent;

<SampleDescription>
    <p>In the following sample, all the weekends (Saturday and Sunday) of a month are <code>disabled</code>, and these dates are <code>restricted</code> to set or select in the DatePicker.</p>
</SampleDescription>
<ActionDescription>
    <p>Disabled Dates sample demonstrates how to disable specific dates in the DatePicker by using <code>OnRenderDayCell</code> event. This event gets triggered on each day cell element creation, that allows you to customize, or disable specific dates in the DatePicker. Here the weekend dates are disabled by using OnRenderDayCell.</p>
    <p>More information on the customize dates can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/datepicker/events/#onrenderdaycell'> documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <div id="wrapper" class="datepicker-section">
        <div id="datepicker-control">
            <SfDatePicker TValue="DateTime?" @ref="@DatePickerObj" Placeholder="Choose a Date">
                <DatePickerEvents TValue="DateTime?" OnRenderDayCell="@DisableDate"></DatePickerEvents>
            </SfDatePicker>
        </div>
    </div>
</div>

<style>
    #wrapper {
        max-width: 300px;
        margin: 0px auto;
        padding-top: 20px;
    }
</style>
@code {
    private SfDatePicker<DateTime?> DatePickerObj { get; set; }
    private void DisableDate(RenderDayCellEventArgs args)
    {
        var view = DatePickerObj.CurrentView();
        if (view == "Month" && ((int)args.Date.DayOfWeek == 0 || (int)args.Date.DayOfWeek == 6))
        {
            args.IsDisabled = true;
        }
    }
}